<template>
	<view class="mainpadding beijingse" v-if="pageShow">
		<!-- 优惠券 -->
		<u-popup :show="show" @close="close" closeable :round="12">
			<view class="mainpadding">
				<view class="xiaohei bigtext fonweight">优惠</view>
				<view class="xiaohei sanshier margin_top">可使用的优惠券</view>
				<view class="" style="height: 500rpx; overflow: auto;">
					<view class="yhbjt margin_top" v-for="item in couponlist" :key="item.id" @click="checkyhq(item)">
						<view class="flexbetween">
							<view class="fonweight xiaohong" style="font-size: 45rpx;">
								￥{{Number(item.price).toFixed(0)}}
								<!-- <text class="strongtext xiaohong fonweight">折</text> -->
							</view>
							<view class="flexbetween" style="width: 74%;">
								<view class="">
									<view class="flexleft">
										<view class="xhbtn flexcenter margin_right1">折扣券</view>
										<view class="ershiba fonweight">{{item.name}}</view>
									</view>
									<view class="xiaohui strongtext margin_top2">{{item.end_time_text}}到期</view>
								</view>
								<view class="">
									<!-- 未选中 -->
									<view class="weixz margin_right1" v-if="item.id!=coupon_id"></view>
									<!-- 已选中 -->
									<view class="margin_right1" v-if="item.id==coupon_id">
										<u-icon name="checkmark-circle-fill" color="#FF0000" size="19"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="smalltext xiaohui margin_top4">请在{{item.end_time_text}}前使用</view>
					</view>
				</view>

			</view>
		</u-popup>
		<view class="">
			<view class="ffffff radius mainpadding ffffff" v-if="addressData!=null" @click="selectaddress()">
				<view class="flexleft">
					<view class="mrbtn flexcenter margin_right2" v-if="addressData.status">默认</view>
					<view class="ershiba xiaohui">{{addressData.cityinfo}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="sanshier xiaohei fonweight">{{addressData.address_detail}}</view>
					<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
				</view>
				<view class="flexleft margin_top1">
					<view class="ershiba  margin_right2">{{addressData.name}}</view>
					<view class="ershiba ">{{addressData.mobile}}</view>
				</view>
			</view>
			<view class="ffffff radius mainpadding ffffff" v-if="addressData==null" @click="selectaddress()">
				<view class="flexbetween margin_top1">
					<view class="sanshier xiaohei fonweight">请选择收货地址</view>
					<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="">
				<view class="margin_top ffffff radius mainpadding" v-for="item in orderData.lists" :key="item.id">
					<view class="shangbj">
						<view class="flexbetween">
							<image class="sptp" :src="item.goodsinfo.image_text" mode=""></image>
							<view class="" style="width: 67%;">
								<view class="ershiba fonweight yhxk">{{item.goodsinfo.title}}</view>
								<view class="strongtext xiaohui yhxk margin_top2">{{item.goodsinfo.sku.difference}}
								</view>
								<view class="flexbetween margin_top4">
									<view class="strongtext fonweight" v-if="lastmsg.order_type==1 && item.goodsinfo.is_dls_goods==0">￥
										<text class="bigtext fonweight">{{item.goodsinfo.sku.price}}</text>
									</view>
									<view class="strongtext fonweight" v-if="lastmsg.order_type==1 && item.goodsinfo.is_dls_goods==1">￥
										<text class="bigtext fonweight">{{item.goodsinfo.sku.jh_price}}</text>
									</view>
									<view class="bigtext fonweight xiaolan" v-if="lastmsg.order_type==2">
										{{item.goodsinfo.sku.price}}积分
									</view>
									<view class="strongtext fonweight">*
										<text class="bigtext fonweight">{{item.goodsinfo.number}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="margin_top ffffff radius mainpadding">
					<view class="flexbetween" v-if="lastmsg.order_type==1">
						<view class="ershiba xiaohui">优惠</view>
						<view class="flexright" @click="show = true">
							<view class="ershiba margin_right1" :class="coupon_id?'xiaolan':'xiaohui'">
								{{coupon_id?couponAll.name:"选择优惠券"}}</view>
							<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
						</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershiba xiaohui">商品积分</view>
						<view class="ershiba">{{orderData.statis.allsub}}积分</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershiba xiaohui">运费</view>
						<view class="ershiba">
							{{Number(orderData.statis.freight_price)?orderData.statis.freight_price:"包邮"}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershiba xiaohui">订单备注</view>
						<input type="text" placeholder="选填" class="textright" v-model="remarks">
					</view>
				</view>
			</view>
		</view>
		<view class="ffffff mainpadding gudingdb flexbetween">
			<view class="bigtext xiaohong fonweight" v-if="lastmsg.order_type==1">￥
				<text class="xiaohong fonweight" style="font-size: 50rpx;">{{orderData.statis.pay_price}}</text>
			</view>
			<view class="sanshier xiaohong fonweight" v-if="lastmsg.order_type==2">
				<text v-if="orderData.statis.pay_price">￥
					<text class="xiaohong fonweight" style="font-size: 40rpx;">{{orderData.statis.pay_price}}
					</text> 
				</text>
				<text class="xiaolan fonweight" style="font-size: 40rpx;" v-if="Number(orderData.statis.score)"><text
						v-if="orderData.statis.pay_price">+</text>{{orderData.statis.score}}积分</text>
			</view>
			<view class="lanbtn flexcenter" @click="pay">提交订单</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				lastmsg: {
					type: '',
					order_type: 1,
					data: [],
				},
				remarks: "",
				addressid: "",
				coupon_id: "",
				couponAll: {},
				orderData: {},
				addressData: {},
				couponlist: [],
				pageShow: false
			}
		},
		onLoad(options) {
			this.lastmsg = JSON.parse(decodeURIComponent(options.msg));
		},
		onShow() {
			uni.$off('addressId')
			uni.$on('addressId', data => {
				this.addressid = data
			})
			this.getdingdan()
		},
		methods: {
			pay() {
				if (this.addressid == "") {
					httpRequest.toast("请选择地址")
					return
				}
				uni.showLoading({
					title: '请稍候...'
				})
				if (this.lastmsg.type == "cart") {
					this.delcar()
				}
				let lists = []
				this.orderData.lists.forEach(item => {
					lists.push({
						goods_id: item.goodsinfo.id,
						number: item.number,
						sku_id: item.sku_id
					})
				})
				let data = {
					address_id: this.addressid, //地址ID
					remarks: this.remarks,
					coupon_id: this.coupon_id,
					data: lists,
					order_type: this.lastmsg.order_type,
				}
				httpRequest.request("/api/order/addOrder", 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let obj = {
							order_id: res.data.order_id,
							pay_price: res.data.pay_price,
						}
						uni.redirectTo({
							url: '/pages_homepage/zhifudd?msg=' + encodeURIComponent(JSON
								.stringify(obj))
						})
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					uni.hideLoading()
					httpRequest.toast(err.msg);
				})
			},
			delcar() {
				let arr = this.lastmsg.data
				arr.forEach(item => {
					delete item.number
				})
				httpRequest.request('/api/cart/delCart', 'POST', {
					data: arr,
				}).then(res => {})
			},
			checkyhq(item) {
				this.coupon_id = item.id;
				this.couponAll = item;
				this.getdingdan()
				this.show = false
			},
			selectaddress() {
				uni.navigateTo({
					url: "/pages_mypage/dizhiguanli?type=1"
				})
			},
			getdingdan() {
				let data = {
					address_id: this.addressid, //地址ID
					type: this.lastmsg.type, //来源类型detail详情，car购物车
					coupon_id: this.coupon_id,
					order_type: this.lastmsg.order_type,
					data: this.lastmsg.data //数据列表
				}
				console.log("jingle9i___________", data)
				console.log("jingle9i___________", uni.getStorageSync("token"))
				httpRequest.request("/api/order/getOrderGoodsList", 'POST', data, false, false, true).then(res => {

					if (res.code == 1) {
						res.data.orderData.lists.forEach(item => {
							this.$set(item, "remark", '')
							item.goodsinfo.sku.difference = item.goodsinfo.sku.difference.join("*")
						})
						this.orderData = res.data.orderData
						this.addressData = res.data.addressData
						this.couponlist = res.data.couponlist
						if (res.data.addressData) {
							this.addressid = res.data.addressData.id
						}
						this.pageShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xhbtn {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF0000;
		width: 72rpx;
		height: 32rpx;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		border: 1rpx solid #FF0000;
	}

	.yhbjt {
		padding: 36rpx 32rpx 10rpx 35rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/yhq.png');
	}

	.lanbtn {
		width: 224rpx;
		height: 88rpx;
		background: #2361FF;
		border-radius: 245rpx 245rpx 245rpx 245rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.shangbj:first-child {
		margin-top: 0rpx;
	}

	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.sptp {
		width: 196rpx;
		height: 196rpx;
		border-radius: 15rpx;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.mrbtn {
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		width: 65rpx;
		height: 28rpx;
		background: #2361FF;
		border-radius: 16rpx 2rpx 16rpx 16rpx;
	}
</style>